<template>
  <div class="nav-bar">
    <img src="../images/logo.png" alt="" class="logo" />
    <input
      type="text"
      placeholder="添加todo"
      class="add-todo"
      v-model.trim="content"
      @keyup.enter="addTodo"
    />
  </div>
</template>
<script>
export default {
  name: 'TheHeader',
  props: {
    todo: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      content: '',
    }
  },
  methods: {
    addTodo() {
      if (!this.content) {
        alert('内容不能为空')
      }
      const isExist = this.todo.some((item) => item.name == this.content)
      if (isExist) {
        alert('内容已存在')
        return
      }
      this.todo.push({
        name: this.content,
        done: false,
      })
      this.content = ''
      localStorage.setItem('todo', JSON.stringify(this.todo))
    },
  },
}
</script>

<style scoped></style>
